<template>
  <div class="activitylist">
    <h2>活动管理</h2>
    <el-tabs type="border-card">
      <el-tab-pane label="我发布的">
        <el-button
          type="text"
          icon="el-icon-plus"
          @click="$router.push('/admin/createactivity') "
        >发布新的活动
        </el-button>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="createtime" label="日期">
            <template slot-scope="scope">{{ scope.row.createtime | dataFormat }}</template>
          </el-table-column>
          <el-table-column prop="activity_title" label="标题"></el-table-column>
          <el-table-column prop="activity_lable" label="类型"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="$router.push(`/admin/updateactivity/${scope.row.activity_id}`) "
                type="text"
                size="small"
              >编辑
              </el-button>
              <el-button type="text" size="small" @click="deleteActivity(scope.row.activity_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20]"
          :page-size="pagelistquery.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagelistquery.total"
        ></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="我参加的">
        <el-table :data="joinTableData" border style="width: 100%">
          <el-table-column fixed prop="createtime" label="报名日期">
            <template slot-scope="scope">{{ scope.row.joins_createtime | dataFormat }}</template>
          </el-table-column>
          <el-table-column prop="activity_title" label="标题"></el-table-column>
          <el-table-column prop="activity_lable" label="类型"></el-table-column>
          <el-table-column fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small">
                <a style="color:#409eff" target="_blank"
                   :href="`${url}/#/activitycontent/${scope.row.activity_id}`">查看</a>
              </el-button>
              <el-button type="text" size="small" @click="delJoin(scope.row.join_id)">取消报名</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'activitylist',
  data () {
    return {
      pagelistquery: {
        total: 0,
        page: 1,
        pagesize: 10
      },
      joinTableData: [],
      tableData: []
    }
  },
  computed: {
    ...mapState({
      url: state => state.url
    })
  },
  methods: {
    async deleteActivity (activityid) {
      const res = await this.$axios.post('/webadmin/deleteactivity',
        this.qs.stringify({ activity_id: activityid }))
      if (res.data.state.type === 'SUCCESS') {
        this.$message.success('删除成功')
        this.getActivityList()
      }
    },
    async delJoin (joinid) {
      const res = await this.$axios.post('/webadmin/deletejoin',
        this.qs.stringify({ id: joinid }))
      if (res.data.state.type === 'SUCCESS') {
        this.$message.success('取消成功')
        this.getActivityJoinList()
      }
    },
    handleSizeChange (val) {
      this.pagelistquery.pagesize = val
      this.getActivityList()
    },
    handleCurrentChange (val) {
      this.pagelistquery.page = val
      this.getActivityList()
    },
    async getActivityList () {
      const data = {
        page: this.pagelistquery.page,
        pagesize: this.pagelistquery.pagesize
      }
      const res = await this.$axios.post('/webadmin/getactivitylist', this.qs.stringify(data))
      if (res.data.state.type === 'SUCCESS') {
        this.tableData = res.data.data
        console.log(res.data)
        this.pagelistquery.total = res.data.count
      }
    },
    async getActivityJoinList () {
      const res = await this.$axios.post('/webadmin/joinslist',
        this.qs.stringify({ type: 'activitycontent' }))
      if (res.data.state.type === 'SUCCESS') {
        this.joinTableData = res.data.data
        console.log('我参加的')
        console.log(res.data)
      }
    }
  },
  created () {
    this.getActivityList()
    this.getActivityJoinList()
  }
}
</script>

<style scoped>

</style>
